<template>
  <div>
    <div class="container">
      <div class="subTitle-box">
        <p @click="$router.push({ path: $i18n.path('') })">首页</p>
        <i class="el-icon-arrow-right"></i>
        <p @click="$router.push({ path: $i18n.path('serviceSupport') })">
          服务支持
        </p>
        <i class="el-icon-arrow-right"></i>
        <p>常见问题</p>
      </div>
      <div class="content-box">
        <div class="tab-box">
          <div class="tab-box-top">
            <p>常见问题</p>
          </div>
          <div class="tab-box-items" v-for="item in typeData" :key="item.id">
            <div class="title-box" @click="switchTab(item.id)">
              <i
                class="el-icon-caret-right icon"
                :style="{
                  transform: currentIndex == item.id ? 'rotate(90deg)' : '',
                }"
              ></i>
              <p class="title">{{ item.title }}</p>
            </div>
            <div class="tab-child" v-if="currentIndex == item.id">
              <p
                class="child-item"
                v-for="child in item.list"
                :key="child.id"
                @click="switchList(child.id), (childIndex = child.id)"
                :style="{ color: childIndex == child.id ? '#2CA2F1' : '' }"
              >
                > {{ child.title }}
              </p>
            </div>
          </div>
        </div>
        <div class="content">
          <p class="title">售后相关</p>
          <div class="question" v-for="item in contentData" :key="item.id">
            <p class="question-title">{{ item.title }}</p>
            <p class="question-answer">{{ item.content }}</p>
          </div>
        </div>
      </div>
    </div>
    <div class="container_mobile">
      <el-collapse v-model="activeName" accordion>
        <el-collapse-item
          :title="item.title"
          :name="String(index + 1)"
          v-for="(item, index) in typeData"
          :key="item.id"
        >
          <div
            v-for="(child, k) in item.list"
            :key="k"
            class="collapse-item"
            @click="switchList(child.id), (childIndex = child.id)"
            :style="{ color: childIndex == child.id ? '#2CA2F1' : '' }"
          >
            {{ child.title }}
          </div>
        </el-collapse-item>
      </el-collapse>
      <div class="question" v-for="item in contentData" :key="item.id">
        <p class="question-title">{{ item.title }}</p>
        <p class="question-answer">{{ item.content }}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: ["1"],
    };
  },
  async asyncData({ $indexApi }) {
    const typeData = await $indexApi.getQuestionListData();
    const res = await $indexApi.getQuestionData({
      goods_id: typeData.data[0].list[0].id,
    });
    // console.log(typeData.data);

    return {
      typeData: typeData.data,
      currentIndex: typeData.data[0].id,
      contentData: res.data,
      childIndex: typeData.data[0].list[0].id,
    };
  },
  methods: {
    async switchList(id) {
      const res = await this.$indexApi.getQuestionData({
        goods_id: id,
      });
      this.contentData = res.data;
      // console.log(res);
    },
    switchTab(id) {
      if (this.currentIndex == id) {
        this.currentIndex = null;
      } else {
        this.currentIndex = id;
      }
    },
  },
};
</script>

<style lang="less" scoped>
@media (min-width: 900px) {
  .container_mobile {
    display: none;
  }

  .container {
    display: block;
    padding: 45rem 100rem 150rem 100rem;

    .subTitle-box {
      display: flex;
      align-items: center;
      font-size: 20rem;
      font-family: Source Han Sans CN;
      font-weight: 300;
      color: #999999;
      margin-bottom: 40rem;

      p {
        cursor: pointer;
        margin: 0;
        &:hover {
          color: #000;
        }
      }
    }

    .content-box {
      display: flex;
      align-items: flex-start;
      gap: 20rem;

      .tab-box {
        width: 260rem;
        background: #ffffff;
        border: 1px solid #e6e6e6;
        border-radius: 10rem;
        padding-bottom: 48rem;

        .tab-box-top {
          height: 60rem;
          background: #f5f5f5;
          padding-left: 21rem;

          p {
            font-size: 24rem;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #333333;
            line-height: 60rem;
            margin: 0;
          }
        }

        .tab-box-items {
          margin-left: 20rem;
          margin-top: 30rem;

          .title-box {
            display: flex;
            align-items: center;
            gap: 12rem;
            cursor: pointer;

            .icon {
              font-size: 20rem;
              color: #2ca2f1;
              transition: 0.6s;
            }

            .title {
              font-size: 20rem;
              font-family: Source Han Sans CN;
              font-weight: 400;
              color: #333333;
              margin: 0;
            }
          }

          .tab-child {
            margin-left: 24rem;
            display: flex;
            flex-direction: column;
            gap: 10rem;
            margin-top: 12rem;

            .child-item {
              font-size: 16rem;
              font-family: Source Han Sans CN;
              font-weight: 400;
              color: #999999;
              margin: 0;
              cursor: pointer;
              letter-spacing: 2px;
            }
          }
        }
      }

      .content {
        width: 1440rem;
        height: 1548rem;
        background: #ffffff;
        border: 1px solid #e6e6e6;
        border-radius: 10rem;
        padding: 36rem 50rem;

        .title {
          font-size: 36rem;
          font-family: Source Han Sans CN;
          font-weight: 500;
          color: #333333;
          text-align: center;
          margin: 0;
        }

        .question {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          gap: 22rem;
          margin-top: 56rem;

          .question-title {
            font-size: 26rem;
            font-family: Source Han Sans CN;
            font-weight: 500;
            color: #333333;
            margin: 0;
          }

          .question-answer {
            font-size: 20rem;
            font-family: Source Han Sans CN;
            font-weight: 300;
            color: #999999;
            margin: 0;
          }
        }
      }
    }
  }
}

@media (max-width: 900px) {
  .container {
    display: none;
  }

  .container_mobile {
    display: block;
    padding: 0 10px;

    .collapse-item {
      height: 48px;
      line-height: 48px;
      color: #999;
      border-top: 1px solid #ebeef5;
    }

    .question {
      margin-top: 24px;

      .question-title {
        font-size: 12px;
        font-family: Source Han Sans CN;
        font-weight: 500;
        color: #333333;
        line-height: 16px;
        padding-bottom: 10px;
        border-bottom: 1px solid #ebeef5;
      }

      .question-answer {
        font-size: 10px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #999999;
        line-height: 16px;
        padding-top: 10px;
      }
    }
  }
}
</style>
